<template>
    <div :ref="elementRef" class="scroll-more">
        <slot></slot>
    </div>
</template>

<script>
export default {
    name: 'RollMore',
    props: {
        elementRef: {
            type: String
        },
        eleLoadMore: {
            type: Boolean
        },
        eleLoading: {
            type: Boolean
        },
        isTable: { // 需要滚动加载的容器是否为表格
            type: Boolean,
            default: false
        },
        watchFirstChild: {
            type: Boolean,
            default: true
        },
        isWatch: { // 是否启动立即监听
            type: Boolean,
            default: true
        },
        isFresh: {
            type: String
        }
    },
    data() {
        return {
            loadMore: true,
            loading: true,
            watchEle: null,
            table: []
        }
    },
    watch: {
        eleLoading: {
            handler() {
                this.loadMore = this.eleLoadMore
                this.loading = this.eleLoading
            }
        },
        eleLoadMore: {
            handler() {
                this.loadMore = this.eleLoadMore
                this.loading = this.eleLoading
            }
        },
        isFresh: {
            handler() {
                if (this.isWatch) {
                    this.init()
                } else {
                    if (this.watchEle === null) {
                        return false
                    }
                    this.watchEle.removeEventListener('scroll', this.scrolls);
                }
                return false
            }
        },
        isWatch: {
            immediate: true,
            handler() {
                if (this.isWatch) {
                    this.init()
                } else {
                    if (this.watchEle === null) {
                        return false
                    }
                    this.watchEle.removeEventListener('scroll', this.scrolls);
                }
                return false
            }
        }
    },
    created() {},
    beforeDestroy() {
        this.watchEle.removeEventListener('scroll', this.scrolls)
    },
    methods: {
        init() {
            this.loadMore = this.eleLoadMore
            this.loading = this.eleLoading
            this.$nextTick(() => {
                if (this.isTable) {
                    const tables = this.$refs[this.elementRef].getElementsByClassName('el-table__body__wrapper');
                    // 拿到表格中承载数据的div
                    const [ele] = tables;
                    this.watchEle = ele
                } else {
                    // 非表格，监听当前的ref或者它的firstChild
                    const ele = this.$refs[this.elementRef];
                    this.watchEle = this.watchFirstChild ? ele.firstChild : ele;
                }
                if (this.watchEle === null) {
                    return;
                }
                this.watchEle.addEventListener('scroll', this.scrolls);
            })
        },
        scrolls(e) {
            if (!this.loadMore || this.loading) {
                return;
            }
            const scrollTop = e.target.scrollTop; // 滚动条到顶部的距离
            const windowHeight = e.target.clientHeight; // 可视区域高度
            const scrollHeight = e.target.scrollHeight; // 滚动条总高(包括现在看到的和上下隐藏起来看不到的)
            if (scrollTop + windowHeight >= scrollHeight) {
                this.loading = true;
                this.$emit('scroll-state', true); // 滚到底部，请求接口加载数据
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.scroll-more {
    width: 100%;
    height: 100%;
    position: relative;
}
</style>